<template>
    <div class="my">
        <div class="first">
            <p style="text-align:center; color: #fff; font-size: 26px;">我的信息</p>
            <div class="card">
                <div class="avatar">
                    <img src="@/assets/avatar.jpg"/>
                </div>
                <div class="nickname">{{ username }}</div>
                <div class="address">
                    <van-cell title="地址" icon="locatio-o"/>
                </div>
            </div>
        </div>
        <div class="content">
            <van-cell title="退出登录" is-link @click="logout"/>
            <van-cell title="完善信息" is-link/>
            <van-cell title="查看记录" is-link/>
            <van-cell title="意见反馈" is-link/>
        </div>
    </div>
</template>

<script>
// 
import {  reactive, toRefs } from 'vue'
import router from '../router'
export default {
  setup () {
    // const { proxy } = getCurrentInstance()
    const state = reactive({
      username: 'default'
    })

        //退出登录
        const logout = () =>{
            //退出操作
            localStorage.removeItem('isLogin');
            //返回首页
            router.push('/home');
        }
        state.username = localStorage.getItem('user');
        return{
            ...toRefs(state),
            logout
        };
    },
 }
</script>

<style scoped>
 .first{
    width: 100%;
    height: 18.75rem;
    background-color: rgb(183,165,248);
    position: relative;
    display: flex;
    justify-content: center;
 }
 .card{
    width: 80%;
    height: 15.625rem;
    border-radius: 0.625rem;
    background-color: #fff;
    position: absolute;
    bottom:-10px;
    box-shadow: 10px 10px 21px rgb(0 0 0 / 40%); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
 }
 .avatar{
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
 }
 .avatar img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
 }
 .nickname{
    color: rgb(204,202,202);
    margin-top: 10px;
 }
 .van-cell{
    color: rgb(204,202,202);
 }
 .content{
    margin-top: 5rem;
 }
</style>